<template lang="html">
  <div class="layHeader" id="header" :class='{reduce:isReduce,border:isBorder,static:isStaticHead}'>
    <div class="w1200 overhide">
      <router-link to='/'>
        <div class="logo fl">
          <img src="../../assets/images/lawyer-logo.png" alt="">
        </div>
      </router-link>
      <div class="layTopFont fl"><img src="../../assets/images/sub-logo.gif" alt=""><span>名人堂</span></div>
      <div class="navs fl">
        <router-link to='/'><div class="list">首页</div></router-link>
        <router-link to='/lawyers'><div class="list" :class='{active:isAct}'>名家律师</div></router-link>
        <router-link to='/consult'><div class="list">在线咨询</div></router-link>
        <!-- <router-link to='/contract'><div class="list">合同文档</div></router-link> -->
      </div>
      <div class="topTel fr">
        <img src="../../assets/images/lay-topTel.png" alt="">
        <span>4008-260-272</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    isBorder:Boolean(),isStaticHead:Boolean(),isAct:Boolean()
  },
  data(){
    return{
      isReduce:false
    }
  },
  methods:{
    headerReduce:function(){
      var top=document.body.scrollTop;
      if(top>0){
        this.isReduce=true
      }else{
        this.isReduce=false
      }
    }
  },
  mounted(){
    window.addEventListener('scroll',this.headerReduce)
  }
}
</script>

<style lang="less">
.layHeader{
  width: 100%;
  padding: 35px 0 23px;z-index: 99;
  font-size: 0;background-color: #fff;
  transition: all 0.3s;
  position: fixed;left: 0;top: 30px;
  &.reduce{padding: 14px 0 2px;}
  &.border{border-bottom: 1px solid #666666;}
  &.static{position: static;}
  .logo{
    display: inline-block;
    border-right: 2px solid #dbdbdb;
    padding-right: 12px;
    vertical-align: middle;
  }
  .layTopFont{
    margin-left: 14px;font-size: 0;
    img{vertical-align: middle;position: relative;top: -6px;}
    span{font-size: 16px;margin-left: 12px;}
  }
  .navs{
    font-size: 16px;margin-top: 8px;
    margin-left: 40px;
    .list{
      float: left;margin-left: 62px;cursor: pointer;
      &:hover,&.active{color: #a55941;}
    }
    .router-link-exact-active div{color: #a55941;}
  }
  .topTel{
    margin-right: 5px;
    img{
      vertical-align: middle;
      width: 22px;height: 22px;
    }
    span{
      font-size: 14px;
      color: #a55941;
      font-weight: bold;
      margin-left: 11px;
      position: relative;
      top: 7px;
      font-style: italic;
    }
  }
}
</style>
